<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>德玛西亚</title>
	<style type="text/css">
		.ball {
			height: 100px;
			width: 100px;
			position: absolute;
			top: 0px;
			left: 0px;
			border-radius: 50px;
			background: radial-gradient(red,black);
		}
		.a {

		}
	</style>
</head>
<body>
	<script type="text/javascript">
		var ball = document.createElement('div');
		ball.className = 'ball';
		// console.log(ball)
		document.body.appendChild(ball);

		// var test = document.createElement('img')
		// document.body.appendChild(test)
		// test.src = 'h5/images/1.png'
		// innerWidth = 1467
		// innerHeight = 598;
		// console.log(window.innerWidth);
		var x = 0;
		var y = 0;
		var windowX = window.innerWidth-100;
		var windowY = window.innerHeight-100;
		var stepX = 5;
		var stepY = 8;
		setInterval(function(){
			if (x >= windowX || x < 0) {
				stepX = -stepX;
			}
			if (y >= windowY || y < 0) {
				stepY = -stepY;
			}
			console.log(y)
			x += stepX;
			y += stepY;
			ball.style.top = y + 'px'
			ball.style.left = x + 'px'
		},20)
	</script>
</body>
</html>